<template>
  <div id="giftCardRecord" class="c-p c-bg-sgray c-ph24">
    <div class="c-fs22 c-fc-gray c-pt20" v-if="dataInfo">
      <span class="c-mr30">收入：{{dataInfo.sendCoin}}币</span>
      <span>支出：{{dataInfo.reduceCoin}}币</span>
    </div>
    <div v-for="(item, index) in logList" :key="index" class="c-bg-white c-ph20 c-w100 c-pv24 c-mt20 c-br8 c-fc-gray c-fs20">
      <div class="c-flex-row c-aligni-center c-justify-sb c-fs24">
        <p class="c-fc-xblack c-flex-grow1 c-text-ellipsis1">{{item.remark ? item.remark : `购买《${item.prodName}》`}}</p>
        <p class="c-ww140 c-felx-shrink0 c-textAlign-r c-fw600" :class="item.coinNumber > 0 ? 'theme-fc' : 'c-fc-xblack'">{{item.coinNumber > 0 ? `+${item.coinNumber}` : item.coinNumber}}</p>
      </div>
      <p class="c-mt12">{{item.typeText}}</p>
      <p class="c-mt12">{{item.createdAt}}</p>
    </div>
    <loading-status-tem :noData="dataStatus == 'NO_DATA'" :noMoreData="dataStatus == 'NO_MORE_DATA'" :noDataText="'暂无记录'"></loading-status-tem>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: "GiftCardRecord",
  components: {
    loadingStatusTem
  },
  beforeCreate() { },
  data() {
    return {
      dataStatus: "NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      logList: [],
      dataInfo: null,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  computed: {
  },
  methods: {
    getUserGiftCardLog() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + "giftCard/getUserGiftCardLog?page=" + pageIndex + '&limit=' + LIMIT, res => {
        if (pageIndex == 1) {
          this.logList = res.data;
        } else {
          this.logList = [...this.logList, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    userGiftCardCount() {
      utilJs.getMethod(global.apiurl + "giftCard/userGiftCardCount", res => {
        this.dataInfo = res;
      })
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.dataStatus == 'HAS_MORE_DATA') {
          that.getUserGiftCardLog();
        }
      });
    },
  },
  activated() {
    utilJs.getGiftCardInfo().then(res => {
      setDocumentTitle(`${res.name || '虚拟币'}明细`);
    })
    pageIndex = 1;
    this.dataStatus = "NO_MORE_DATA";
    this.logList = [];
    this.dataInfo = null;
    this.userGiftCardCount();
    this.getUserGiftCardLog();
    window.scrollTo(0, 0);
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
